import React from 'react';
import { Balloon } from '@teamix/ui';
import { YunxiaoIcon } from '@alife/devops-ui';
import { navigateOpen } from 'utils/router';
import intl from '../../locale';

const { Tooltip } = Balloon;

const iconColorMap = {
  opened: 'green',
  reopened: 'green',
  accepted: 'green',
  merged: 'gray',
  closed: 'red',
};

const iconMap = {
  opened: 'pull-request-failed-line',
  reopened: 'pull-request-failed-line',
  accepted: 'pull-request-success-line',
  merged: 'merge-line',
  closed: 'pull-request-closed-line',
};

export default class MrIcon extends React.Component {
  render() {
    const { codeReview } = this.props;
    if (!(codeReview && codeReview.id)) {
      return null;
    }
    const { pathResource } = window.FORCE;
    const mrPath = `/${pathResource.fullPath}/merge_request/${codeReview.id}`;
    return (
      <Tooltip
        trigger={
          <YunxiaoIcon
            type={iconMap[codeReview.state]}
            style={{ color: `${iconColorMap[codeReview.state]}` }}
            onClick={(e) => {
              e.stopPropagation();
              navigateOpen(mrPath, '_blank');
            }}
          />
        }
        align="t"
      >
        {intl.get({
          id: 'code-assets.components.dependencyBuildIssuesList.mrIcon.AutomaticallyFixedMergeRequests',
          defaultMessage: '自动修复的合并请求',
        })}
      </Tooltip>
    );
  }
}
